<template>
	<view style="margin-top: 50px;">
		<uni-card>
			<view>
				<view class="yuView">
					<view class="yuItem">
						<!-- 图标 -->
						<view class="imgView">
							<image src="../../../static/images/yuyuechenggong.png" mode=""></image>
						</view>
						<view>预约成功</view>
					</view>
				</view>
				<view style="text-align: center;font-size: 20px;font-weight: 600;">预约编号：{{ reservationList.id }}</view>
				<view class="fhIndex">
					<view class="fhItem" style="background-color: #1D6FFF;">
						<navigator url="/pages/index/home/home" open-type="switchTab">
							返回首页
						</navigator>
					</view>
					<view class="fhItem" style="background-color: #CECECE;">
						<navigator :url="`/pages/index/cheliangweixiu/weixiuxiangqing?id=${reservationList.id}`">
							预约详情
						</navigator>
					</view>
				</view>
			</view>
		</uni-card>
	</view>
</template>

<script setup>
import {ref} from 'vue'
import {onLoad} from '@dcloudio/uni-app'
import baseUrl from '../../utils/urlConfig.js'

	const reservationList = ref({
		id: ''
	})

	const queryParams = ref({
		pageNum: 1,
		pageSize: 10,
		verificationCode: '',
	})
	onLoad((options) => {
		// 正确写法：直接通过 queryParams.value 访问
		queryParams.value.verificationCode = options.verificationCode
		queryByVerificationCode()
	})


	//  定义一个方法根据预约核销码查询
	function queryByVerificationCode() {
		uni.request({
			url: baseUrl + '/yyq/reservation/list',
			method: 'get',
			data: queryParams.value,
			header: {
				Authorization: uni.getStorageSync('Token')
			},
			success: (res) => {
				if (res.data && res.data.code === 200) { // 检查后端返回的状态码
					reservationList.value = res.data.rows[0]
				}
			},
		});
	}
</script>

<style>



	.imgView>image {
		width: 150rpx;
		height: 150rpx;
	}

	/* 预约成功 */
	.yuView {
		height: 400rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		/* align-content: space-around; */
		align-items: center;
	}

	.yuView>view:nth-child(2) {
		font-size: 30rpx;
		font-weight: bold;
	}

	.yuItem {
		width: 300rpx;
		height: 300rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-content: center;
	}

	.yuItem>view:nth-child(2) {
		font-size: 40rpx;
		font-weight: bold;
		padding-top: 20rpx;
	}

	/* 返回首页 */
	.fhIndex {
		height: 240rpx;
		margin: 40rpx 0rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-content: space-around;

	}

	.fhItem {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 400rpx;
		height: 80rpx;
		border-radius: 10px;
		font-weight: 500;
		color: white;
		font-size: 16px;
	}
</style>